<template>
  <div
    style="
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: center;
    "
  >
    <el-calendar ref="calendar">
      <template #header="{ date }">
        <span>{{ date }}</span>
        <span
          style="
            font-size: 40px;
            font-weight: bolder;
            text-shadow: 5px 5px 1px rgb(115, 116, 117);
          "
        >
          日历</span
        >
        <el-button-group>
          <el-button size="small" @click="selectDate('prev-year')">
            前一年
          </el-button>
          <el-button size="small" @click="selectDate('prev-month')">
            前一个月
          </el-button>
          <el-button size="small" @click="selectDate('today')">今天</el-button>
          <el-button size="small" @click="selectDate('next-month')">
            下一个月
          </el-button>
          <el-button size="small" @click="selectDate('next-year')">
            下年
          </el-button>
        </el-button-group>
      </template>
    </el-calendar>
  </div>
</template>
<script></script>
<script setup>
import { ref } from 'vue'

const calendar = ref()
const selectDate = (val) => {
  calendar.value.selectDate(val)
}
</script>
